import Taro from '@tarojs/taro'
import React from 'react'
import { View, Text, Image } from '@tarojs/components'
import imgList from '@components/imgList'
import { useDispatch } from 'react-redux'
import { cancelActivity } from '@redux/actions'
import './index.scss'

const statusClass = {
    '组队中': 'build',
    '待开始': 'wait'
}

const typeIcon = {
    '小聚场': imgList.parkIcon,
    '训练': imgList.trainIcon
}

function ActivityItem ({value, type, showIcon = true}) {

    const dispatch = useDispatch();

    function handleCancel (item) {
        console.log(item)
        Taro.showToast({title: '取消活动'})
        dispatch(cancelActivity(item.id))
    }

    return <View className={`${type ? 'bigItem ' : ''}activityItem`}>
            <View className={`${type ? 'bigTitle ' : ''}title`}>
                {
                    showIcon &&
                    <Image className='icon' src={typeIcon[value.type]}></Image>
                }
                <Text>{value.type}</Text>
                {
                    type &&
                    <View className='rightText'>
                        <Text className={`status ${statusClass[value.status]}`}>{value.status}</Text>
                        <Image className='rightIcon' src={imgList.rightIcon}></Image>
                    </View>
                }
            </View>
            <View className='contentRow'>
                <Image className='icon' mode='aspectFit' src={imgList.locationIcon}></Image>
                <Text>{value.site}</Text>
                {
                    !type &&
                    <View className='rightText'>
                        <Text>{`(${value.progress})`}</Text>
                        <Text className={`status ${statusClass[value.status]}`}>{value.status}</Text>
                    </View>
                }
            </View>
            <View className='contentRow'>
                <Image className='icon' mode='aspectFit' src={imgList.timeIcon}></Image>
                <Text>{value.time}</Text>
                {
                !type && value.tags && 
                <View className='tags'>
                    {
                    value.tags.map((tag,index) => <Text key={`mtag${index}`} className='tag'>{tag}</Text>)
                    }
                </View>
                }
            </View>
            {
                type === 'present' &&
                <View className="cancelBtn" onClick={() =>handleCancel(value)}>取消活动</View>
            }
        </View>
}

export default ActivityItem
